<template>
    <el-card shadow="hover" header="我的日历" class="calendar">
        <div class="custome-calendar">
            <el-calendar v-model="state.calendarValue" ref="calendarRef">
                <template #header="{ date }">
                    <span>{{ date }}</span>
                    <el-button-group>
                        <el-button size="small" @click="selectDate('prev-month')"> 上个月 </el-button>
                        <el-button size="small" @click="selectDate('today')">今天</el-button>
                        <el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
                    </el-button-group>
                </template>
                <template #date-cell="{ data }">
                    <div @click="handleClickDate(data)">
                        <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
                        <div style="font-size: 10px">
                            {{ solarToLunar(data.day) }}
                        </div>
                    </div>
                </template>
            </el-calendar>
        </div>
    </el-card>
</template>
<script>
export default {
	title: '日历',
	icon: 'Calendar',
	description: '快捷入口',
};
</script>

<script setup>
import { dayjs, ElMessage, ElMessageBox } from 'element-plus';
import { Lunar, Solar } from 'lunar-javascript';

const calendarRef = ref();

const state = reactive({
    ScheduleData: [], // 日程列表数据
    TodayScheduleData: [], // 当天列表数据
    calendarValue: new Date(),
    queryParams: {
        scheduleTime: new Date(),
        startTime: new Date(),
        endTime: new Date(),
    },
    editTitle: '',
    currentMonth: '',
});

const selectDate = (val) => {
    if (!calendarRef.value) return;
    calendarRef.value.selectDate(val);
    handleQuery();
};


// 点击日历中的日期
const handleClickDate = (data) => {
    if (state.currentMonth != dayjs(data.day).format('YYYYMM')) {
    }
};


// 公历转农历
const solarToLunar = (solarDate) => {
    let date = new Date(solarDate); // 转换为 Date 对象
    const solar = Solar.fromDate(date); // 获取 Solar 对象
    const lunar = solar.getLunar(); // 获取 Lunar 对象

    // 判断是否是初一
    if (lunar.getDay() === 1) {
        return `${lunar.getMonthInChinese()}月`; // 返回月份
    } else {
        return `${lunar.getDayInChinese()}`; // 返回日
    }
};

</script>

<style lang="scss" scoped>

.custome-calendar {
    position: relative;
    text-align: center;

    :deep(.el-calendar) {
        .el-calendar-table .el-calendar-day {
            width: 100%;
            height: 100%;
        }

        .el-calendar__body {
            padding: 5px 0;
        }

        .el-calendar-table .el-calendar-day {
            position: relative;
        }

        td .spandate {
            margin: auto;
            width: 26px;
            height: 26px;
            line-height: 26px;
            border-radius: 50%;
        }

        td.is-selected .spandate {
            width: 26px;
            height: 26px;
            line-height: 26px;
            border-radius: 50%;
            color: #fff;
            background-color: var(--el-color-primary);
        }

        /*小红点样式*/
        .el-badge {
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 100%;
        }
    }
}
</style>
